<template>
  <div>
    <div class="header-btn">
      <div>{{ title }}</div>
      <div>
        <el-button type="primary" @click="addOrUpdateTask">确认</el-button>
        <el-button type="info" plain @click="goBack">返回</el-button>
      </div>
    </div>
    <div class="wrap g-card">
      <el-form
        ref="detailForm"
        :model="detailForm"
        :rules="rules11"
        label-width="110px"
        label-position="right"
        style="position: relative"
      >
        <el-form-item label="群发名称" prop="groupName">
          <el-input
            popper-class="minWidth-inp"
            style="width: 400px"
            placeholder="请输入群发名称"
            v-model="detailForm.groupName"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="群发员工" prop="staff">
          <el-select
            style="width: 400px"
            v-model="detailForm.staff"
            placeholder="请选择群发员工"
          >
            <el-option
              v-for="item in staffOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="群发内容" prop="remark">
          <el-input
            type="textarea"
            :autosize="{ minRows: 3 }"
            placeholder="请填写文本内容"
            v-model="detailForm.remark"
            style="width: 600px"
            maxlength="2000"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item label="选择素材">
          <NormalSelectMaterial :selectedList="detailForm.mediaContentDetails" @confirmSelect="confirmSelectFn" />
        </el-form-item>
        <el-form-item label="二维码" prop="radio1">
          <NormalQrCode :codeInfo="codeParams" @selectedSure="qrCodeConfrim" @deleteSeletedQrcode="deleteSeletedQrcode" />
        </el-form-item>
        <el-form-item label="发送类型" prop="radio">
          <el-radio-group v-model="detailForm.radio">
            <el-radio :label="'1'">立即发送</el-radio>
            <el-radio :label="'0'">定时发送</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="detailForm.radio === '0'"
          label="指定发送时间"
          prop="date"
        >
          <el-date-picker
            v-model="detailForm.date"
            type="datetime"
            placeholder="请选择时间"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
  
<script>
import { queryDeptMsg } from "../../../api/communityOperating/personalSop";
import { addOrUpdateTask } from "../../../api/communityOperating/enterpriseCircle";

export default {
  name: "addGroup",
  data() {
    const remarkValidate = (rule, value, callback) => {
      const reg = /^[\w\u4E00-\u9FA5\_\-\.\:\@\#\*\/]+$/;
      if (value) {
        if (value.length > 200) {
          callback(new Error("您录入字数超过200字"));
        } else {
          callback();
        }
      } else {
        callback(new Error("请输入文本内容"));
      }
    };
    return {
      staffOption: [],
      codeInfo: "", //二维码信息
      editCodeInfo: {},
      // 设置不能选则当天之前的年月日和时分秒
      pickerOptions: {
        disabledDate(time) {
          var date = new Date();
          date.setFullYear(date.getFullYear() + 2);
          date.setDate(date.getDate() - 1);
          return (
            time.getTime() < Date.now() - 8.64e7 ||
            time.getTime() > date.getTime()
          );
        },
        selectableRange: (() => {
          let data = new Date();
          let hour = data.getHours();
          let minute = data.getMinutes();
          let second = data.getSeconds();
          return [`${hour}:${minute}:${second} - 23:59:59`];
        })(),
      },
      title: "创建企微群群发", // 页面标题
      activeName: "first",
      modifyVisible: false,
      textDialog: false, //文本输入
      textUpload: "", // 点击修改，赋值文本内容
      deptIdObj: null,
      taskId: "", // 数据id
      loading: false, // 新增员工弹窗
      staffDialog: false, // 新增员工弹窗
      customerDialog: false, // 新增客户弹窗
      customerName: "", // 客户
      customerList: [], // 新增客户数据
      addCustomerList: [],
      customerDto: [], // 指定客户
      stashCustomerList: [], // 暂存新增的客户数据
      total: 0,
      form: {
        // 基础设置
        taskName: "", // 任务名称
        chooseStaff: "1",
        remark: "",
        customerTag: [],
        pageNum: 1,
        pageSize: 10,
      },
      detailForm: {
        groupName: "",
        staff: "",
        content: "",
        radio: "",
        radio1: "有二维码",
        scrmPersonSopMaterials: [], // 素材
        date: "",
      },
      scrmPersonSopUserRels: [], // 执行员工
      scrmPersonSopCustomerRels: [], // 选择客户
      scrmPersonSopRuleDtos: [], // 文案及周期设置
      rules11: {
        groupName: [
          { required: true, message: "请输入群发名称", trigger: "blur" },
          { max: 32, message: "您录入的字数超过32字", trigger: "blur" },
        ],
        staff: [{ required: true, message: "请选择群发员工", trigger: "change" }],
        remark: [{ required: true, validator: remarkValidate, trigger: "change" }],
        radio: [{ required: true, message: "请选择发送类型", trigger: "change" }],
        date: [{ required: true, message: "请选择时间", trigger: "change" }],
      },
      dialogList1: [], // 公司架构
      staffList: [], // 第二列勾选内容
      dialogList2: [], // 选择人员
      dialogList3: [], // 已经勾选的人员
      editIndex: null, // 控制是添加打开弹窗，清空内容
      allDialogList: [], // 存放所有的员工，点弹窗确认需要遍历
      allId: [],
      moId: "",
      qrcodeBool: true,
      codeParams: {
        qrState: '1',
        qrType: '',
        activityName: '',
        codeUrl: '',
        qrId: ''
      },
    };
  },
  created() {
  },
  methods: {
    // 删除二维码
    deleteSeletedQrcode() {
      this.codeParams.qrType = '';
      this.codeParams.activityName = '';
      this.codeParams.codeUrl = '';
      this.codeParams.qrId = '';
    },
    qrCodeConfrim(data) {
      if (data) {
        this.codeParams = {
          qrState: data.qrState,
          qrType: data.qrType,
          activityName: data.activityName,
          codeUrl: data.qrCode || data.codeUrl,
          qrId: data.qrId
        }
      } else {
        this.codeParams = {
          qrState: 1,
          qrType: '',
          activityName: '',
          codeUrl: '',
          qrId: ''
        }
      }
    },
    // 查询添加员工的信息
    queryDeptMsg() {
      this.dialogList1 = [];
      queryDeptMsg().then((res) => {
        if (res.code === 200 && res.data.length) {
          res.data.forEach((item) => {
            this.dialogList1.push({
              id: item.deptId,
              label: item.deptName,
              children: null,
            });
          });
        }
      });
    },
    // 确认
    addOrUpdateTask() {
      let obj = {
        moId: "",
        scopeType: "0",
        noAddUser: "",
        customerTag: "",
        content: this.detailForm.remark,
        flag: this.detailForm.radio,
        pushTime: this.detailForm.date,
        contentType: "",
        contentDetail: null,
        qrWemoment: null,
        otherContent: [],
      };

      let Array = this.detailForm.scrmPersonSopMaterials;

      if (Object.keys(this.codeInfo).length > 0) {
        obj.qrWemoment = [this.codeInfo];
      }

      if (Array.length > 0) {
        obj.contentDetail = Array;
        Array.forEach((val, key) => {
          // 将mediaType转成字符串
          val.mediaType = String(val.mediaType);
          obj.otherContent[key] = {};
          obj.otherContent[key].other = Array[key].name;
          if (
            val.mediaType === "3" ||
            val.mediaType === "4" ||
            val.mediaType === "10" ||
            val.mediaType === "11"
          ) {
            // 链接
            obj.contentType = "link";
            obj.otherContent[key].mediaType = val.mediaType;
            obj.otherContent[key].annexUrl = Array[key].materialUrl;
            obj.otherContent[key].coverUrl = Array[key].coverUrl;
          } else if (val.mediaType === "5" || val.mediaType === "99") {
            // 图片
            obj.contentType = "image";
            obj.otherContent[key].mediaType = val.mediaType;
            obj.otherContent[key].annexUrl = Array[key].coverUrl;
          } else if (val.mediaType === "7") {
            // 视频
            obj.contentType = "video";
            obj.otherContent[key].mediaType = val.mediaType;
            obj.otherContent[key].annexUrl = Array[key].materialUrl;
          }
        });
      }

      // 处理员工数据
      if (this.scrmPersonSopUserRels && this.scrmPersonSopUserRels.length > 0) {
        this.scrmPersonSopUserRels.forEach((val, key) => {
          if (key + 1 < this.scrmPersonSopUserRels.length) {
            obj.noAddUser += val.userId + ",";
          } else {
            obj.noAddUser += val.userId;
          }
        });
      }
      // 处理客户数据
      if (this.scrmPersonSopCustomerRels && this.scrmPersonSopCustomerRels.length > 0) {
        this.scrmPersonSopCustomerRels.forEach((val, key) => {
          if (key + 1 < this.scrmPersonSopCustomerRels.length) {
            obj.customerTag += val.userId + ",";
          } else {
            obj.customerTag += val.userId;
          }
        });
      }
      if (
        this.$route.query.rowContent &&
        Object.keys(this.$route.query.rowContent).length > 0 &&
        this.$route.query.rowContent.moId !== ""
      ) {
        obj.moId = this.$route.query.rowContent.moId;
      }
      this.$refs["detailForm"].validate((valid) => {
        if (valid) {
          // 新增
          addOrUpdateTask(obj).then((res) => {
            if (res.code === 200) {
              this.$message.success(res.data);
              this.$router.push({ name: "EnterpriseCircle" });
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          this.$message.error("您还未录入完成，请核对后提交!");
        }
      });
    },
    // 返回
    goBack() {
      this.$router.go(-1);
    },
    // 确定选择的素材
    confirmSelectFn(val) {
      this.detailForm.materialList = val;
    },
  },
};
</script>
  
<style lang="scss" scoped>
@import "../../../styles/base.scss";

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}

.dialog-wrap {
  display: flex;
  justify-content: flex-start;

  .dialog-list {
    width: 33%;
    padding: 0 15px;
    box-sizing: border-box;
    max-height: 500px;
    overflow: auto;

    &:nth-child(2) {
      flex: 1;
      border-left: $normalBorder;
      border-right: $normalBorder;
    }
  }
  .block-wrap {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-weight: 600;
    color: #2a2a2a;
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    .block-item {
      width: 80px;
      padding: 5px 0;
      margin: 10px;
      border: $normalBorder;
      text-align: center;
      .svg-icon {
        width: 4em;
        height: 3em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
    }
  }
  .upload-list {
    display: flex;
    justify-content: space-between;
    border: $normalBorder;
    padding: 0 10px;
  }
}

.copy-card {
  width: 740px;
  background-color: #fafafa;
  position: relative;
  margin: 10px;
  .content-item {
    width: 400px;
    background-color: #e9e9e9;
    padding: 0 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }
  .copy-edit {
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .right-close {
    position: absolute;
    right: -2px;
    top: -2px;
  }
}

.block-wrap {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  font-weight: 400;
  color: #2a2a2a;
  font-size: 12px;
  font-family: PingFangSC-Medium, PingFang SC;
  .block-item {
    width: 80px;
    padding: 5px 0;
    margin: 10px;
    border: $normalBorder;
    text-align: center;
    .svg-icon {
      width: 4em;
      height: 3em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
      margin-top: 12px;
    }
    div {
      margin-top: -10px;
    }
  }

  .upload-list {
    display: flex;
    justify-content: space-between;
    border: $normalBorder;
    padding: 0 10px;
  }
}

.ques {
  width: 200px;
  height: 21px;
  font-size: 15px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #2e2e2e;
  line-height: 21px;
  margin-top: 20px;
  margin-left: 15px;
}
.answer {
  display: inline-block;
  width: 120px;
  height: 36px;
  background: #f5f5f5;
  border-radius: 2px;
  margin-top: 16px;
  margin-left: 15px;
  text-align: center;
  span {
    display: block;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    margin-top: 8px;
  }
}
.option-active {
  background: #ffeeeb;
  span {
    color: #ff5252;
  }
}
</style>
  